<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            margin: auto;
            font-size: 15px;
        }

        div>input {
            width: 200px;
            outline: 0;
            border: 0px;
            border-bottom: solid 1px black;
            vertical-align: middle;
        }

        div>ul>li {
            list-style: none;
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" value="">
        <button>确定</button>
        <ul>
        </ul>
    </div>
    <script>
        function test() {
            let divs = document.querySelector('div')
            divs.addEventListener('click', function (e) {
                    e = e || window.event
                    var target = e.target || e.srcElement
                    //console.log(target.innerHTML)
                    if (target.innerHTML == '确定') {
                        let tetxts = document.querySelector('input')
                        let uls=document.querySelector('ul')
                        let lis = document.createElement('li')
                        lis.innerHTML = tetxts.value
                        //console.log(lis)
                        uls.appendChild(lis)
                         tetxts.value = ''
                        lis.onclick = function () {
                            //console.log(this)
                            this.remove()
                        }
                    }

                })
        }
        test()
    </script>
</body>

</html>